<template>
	<view class="container">
		<z-paging ref="paging" v-model="dataList" @query="queryList" :auto="false" :safe-area-inset-bottom="false">
			<template #top>
				<!-- 首页banner轮播图 -->
				<swiper class="swiper" circular :indicator-dots="false" :autoplay="true" :interval="5000"
					:duration="500">
					<swiper-item class="swiper-item">
						<image src="@/static/banner.png" mode="aspectFill"></image>
					</swiper-item>
				</swiper>
				<!-- 搜索 -->
				<view class="search">
					<view class="search-input">
						<image src="@/static/search.png" mode="aspectFill"></image>
						<input placeholder="搜索产品名称" v-model="name" @input="handleSearch"/>
					</view>
					<view class="search-kefu" @click="goKefu">
						<image src="@/static/kefu.png" mode="aspectFill"></image>
					</view>
				</view>
				<!-- tab栏 -->
				<v-tabs v-model="current" field="cate_name" :tabs="tabs" @change="changeTab" height="86rpx" color="#626576"
					activeColor="#3B7AFE" lineColor="#3B7AFE" fontSize="30rpx"></v-tabs>
			</template>
			<view class="main">
				<view class="list">
					<view class="list-item" v-for="i in dataList" :key="i.id" @click="handleItem(i)">
						<view class="list-item-header">
							<view class="list-item-header-left">
								<view class="list-item-header-left-img">
									<image :src="i.icon" mode="aspectFill"></image>
								</view>
								<view class="list-item-header-left-info">
									<view class="title">{{ i.name }}</view>
									<view class="tip">{{ i.desc }}</view>
								</view>
							</view>
							<view class="list-item-header-right">
								立即申请
							</view>
						</view>
						<view class="list-item-body">
							<view class="list-item-body-item">
								<view>
									<text class="label">最高额度：</text>
									<text class="value" style="color: #FF0000;">{{ i.money || '--'}}万</text>
								</view>
								<view>
									<text class="label">还款方式：</text>
									<text class="value">{{ i.repayment || '--' }}</text>
								</view>
							</view>
							<view class="list-item-body-item line" style="position: relative;">
								<view>
									<text class="label">年化利率：</text>
									<text class="value">{{ i.interest || '--'}}%</text>
								</view>
								<view>
									<text class="label">贷款期限：</text>
									<text class="value">{{ i.cycle || '--'}}</text>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</z-paging>
	</view>
</template>

<script setup>
	import {
		reactive,
		ref,
		computed,
		watchEffect,
		onMounted
	} from 'vue'
	import {
		onReady,
		onLoad
	} from '@dcloudio/uni-app'
	import {
		getHttpApi
	} from '@/api/api.js'
	const paging = ref(null);
	const name = ref('')
	const cate_id = ref(null)
	onMounted(async() => {
		getKefuUrl()
		await getClassList()
		await paging.value.reload()
	})
	const current = ref(null)
	const tabs = ref([])
	const changeTab = (item,index) => {
		cate_id.value = item.id
		paging.value.reload()
	}
	const dataList = ref([])
	const queryList = async (page, limit) => {
		try {
			let res = await getHttpApi({
				route: 'Newfinance.financeIndex',
				page,
				limit,
				name: name.value,
				cate_id: cate_id.value
			});
			paging.value.complete(res.data.data);
		} catch (e) {
			paging.value.complete(false);
		}
	}
	// 获取分类列表
	const getClassList = async()=> {
		try{
			let res = await getHttpApi({
				route: 'Newfinance.financeCate',
				type: 3
			});
			tabs.value = res.data
			current.value = 0
			cate_id.value = tabs.value[0].id
		}catch(e){
			//TODO handle the exception
		}
	}
	const handleItem = (i) => {
		uni.navigateTo({
			url: `/pages/product/details?id=${i.id}`
		})
	}
	const handleSearch = ()=> {
		paging.value.reload()
	}
	// 获取客服配置
	const keFuUrl = ref('')
	const getKefuUrl = ()=> {
		getHttpApi({
			route: 'video.kefEwm',
			type: '7',
			uuid:'0'
		}).then(res=>{
			keFuUrl.value = res.data.kef_url
		})
	}
	const goKefu = ()=>{
		window.location.href = keFuUrl.value
	}
</script>
<style>
	page {
		background-color: #fff;
	}
</style>
<style lang="scss" scoped>
	.main {
		background: #F9F9F9;
	}

	.line::after {
		content: '';
		position: absolute;
		left: -13rpx;
		/* 调整竖线位置 */
		top: 0;
		bottom: 0;
		width: 2rpx;
		background: #EDEEF6;
	}

	.swiper {
		height: 260rpx;
		width: 100%;

		&-item {
			width: 100%;
			height: 100%;
		}
	}

	.search {
		padding: 34rpx 26rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;

		&-input {
			width: 592rpx;
			height: 68rpx;
			border-radius: 200rpx 200rpx 200rpx 200rpx;
			border: 2rpx solid #B1CAFF;
			display: flex;
			align-items: center;

			&>image {
				width: 32rpx;
				height: 28.44rpx;
				margin-left: 36rpx;
				margin-right: 14rpx;
			}

			&>input {
				flex: 1;
			}
		}

		&-kefu {
			width: 78rpx;
			height: 82rpx;
		}
	}

	.list {
		padding: 20rpx 25rpx;

		&-item {
			padding: 24rpx 22rpx 18rpx 20rpx;
			background: #FFFFFF;
			border-radius: 10rpx 10rpx 10rpx 10rpx;
			margin-bottom: 24rpx;

			&-body {
				display: flex;
				margin-top: 34rpx;
				position: relative;
				justify-content: space-between;

				&-item {
					font-weight: 400;
					font-size: 24rpx;
					width: 48%;

					&>view {
						margin-bottom: 18rpx;
						display: flex;

						&>text {
							display: inline-block;
						}

						&>text:nth-child(2) {
							flex: 1;
						}
					}
				}
			}

			&-header {
				display: flex;
				align-items: center;
				justify-content: space-between;

				&-left {
					display: flex;

					&-img {
						width: 84rpx;
						height: 84rpx;
						border-radius: 10rpx;
						overflow: hidden;
						margin-right: 20rpx;
					}
				}

				&-right {
					width: 136rpx;
					height: 48rpx;
					background: #1A64FF;
					border-radius: 10rpx 10rpx 10rpx 10rpx;
					font-weight: 400;
					font-size: 26rpx;
					color: #FFFFFF;
					text-align: center;
					line-height: 48rpx;
				}
			}
		}
	}

	.title {
		font-weight: 400;
		font-size: 28rpx;
		color: #1B1C23;
		line-height: 48rpx;
		margin-bottom: 6rpx;
	}

	.tip {
		font-weight: 400;
		font-size: 22rpx;
		color: #E18A03;
		line-height: 22rpx;
	}

	.label {
		font-weight: 400;
		font-size: 24rpx;
		color: #6F7283;
		line-height: 28rpx;
	}

	.value {
		font-weight: 400;
		font-size: 24rpx;
		color: #1B1C23;
		line-height: 28rpx;
	}

	image {
		width: 100%;
		height: 100%;
	}
</style>